import styled from 'styled-components';
import logoPic from '../../statics/logo.png'

export const HeaderWrapper = styled.div`
    position:relative;
    height:56px;
    margin:auto;
    border-bottom:1px solid #f0f0f0;
    .width-limit{
    min-width: 768px;
    max-width: 1440px;
    margin: 0 auto;
    position:relative;
    }
`;
export const Logo = styled.div`
    height:58px;
    display:block;
    position:absolute;
    top:0;
    left:0;
    width:200px;
    background:url(${logoPic});
    background-repeat:no-repeat;
    background-size: contain;
`;
export const Nav = styled.div`
    width:960px;
    height:58px;
    margin: 0 auto;
    padding-right:70px;
    box-sizing:border-box;
`;
export const NavItem = styled.div`
   line-height:56px;
   padding:0 15px;
   font-size:17px;
   color:#333;
   cursor:pointer;
   &.left{
   float:left
   }
   &.right{
   float:right;
   color:#969696
   }
   &.active{
   color:#ea6f5a
   }
`;
export const NavSearch = styled.input.attrs({
    placeholder: '搜索'
})` 
    
    width:240px;
    height:38px;
    border:none;
    margin-top:9px;
    margin-left:20px;
    outline:none;
    border-radius:19px;
    background:#eee;
    padding:0 35px 0 20px;
    box-sizing:border-box;
    line-height:38px;
    font-size:14px;
    color:#333;
     &.slide-enter {
     transition: all .2s ease-in-out;
    }
    &.slide-enter-active {
     width:320px;
     transition:all .2s ease-in-out;
     }
    &.slide-exit {
     transition: width .2s ease-in-out;
     }
    &.slide-exit-active {
     width:240px;
     transition: width .2s ease-in-out;
     }
    &.focused{
    width:320px;
    }
    &::placeholder{
     color:#999
    }
  
`;
export const Addition = styled.div`
    position:absolute;
    right:0;
    height:58px;
    top:0;
`;
export const Button = styled.div`
    float:right;
    line-height:38px;
    border-radius:19px;
    margin-top:9px;
    border:1px solid #ec6149;
    margin-right:20px;
    display:block;
    padding:0 20px;
    font-size:14px;
    cursor:pointer;
    &.reg{
     color:#ec6149;
    }
    &.writing{
     color:#fff;
     background:#ec6149;
    }
`;
export const SearchWrapper = styled.div`
    z-index:1;
    position:relative;
    float:left;
    .zoom{
      position:absolute;
      right:5px;
      bottom:4px;
      width:30px;
      line-height:30px;
      border-radius:15px;
      text-align:center;
      color:#969696;
      &.focused{
      background:#777;
      color:#fff
      }
    }
`;
export const SearchInfo = styled.div`
    position:absolute;
    left:0;
    top:58px;
    width:240px;
    padding:0 20px 20px 20px;
    margin-left:20px;
    box-shadow: 0 0 8px rgba(0,0,0,.2);
    box-sizing:border-box;
    background:#fff;
    &::before{
    content:'';
    display:block;
    width:0;
    height:0;
    top:-20px;
    position:absolute;
    border-style:solid;
    border-color:transparent transparent #fff; transparent;
    border-width:10px 10px 10px 10px;
    }
`;
export const SearchInfoTitle=styled.div`
    margin-top:20px;
    margin-bottom:15px;
    line-height:20px;
    font-size:14px;
    color:#969696;
    user-select:none;
`;
export const SearchInfoSwitch=styled.span`
    float:right;
    font-size:13px;
    cursor:pointer;
    .spin{
      display:block;
      float:left;
      font-size:12px;
      margin-right:2px;
      transition:all .5s ease;
      transform:rotate(0deg);
      transform-origin:center center;
    }
`;
export const SearchInfoItem=styled.a`
    display:block;
    float:left;
    margin-right:10px;
    margin-bottom:8px;
    padding: 0px 6px;
    line-height:20px;
    font-size:12px;
    border:1px solid #ddd;
    color:#787878;
    border-radius: 3px;
    cursor:pointer;
    box-sizing:border-box;
    user-select:none;
    &:hover{
    border:1px solid #787878;
    color:#333;
    }
`;
export const SearchInfoList=styled.div`
    width:210px;
`;
